<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-我的卡券'" :headtype="2"></page-head> -->
		<view class="content margin30">
			<view class="flex">
				<view class="ordernavmain">
					<view class="ordereach" :class="activenav == 0 ? 'activenav':''" @click="navclick(0)">未使用（4）</view>
					<view class="ordereach" :class="activenav == 2 ? 'activenav':''" @click="navclick(2)">已使用（0）</view>
					<view class="ordereach" :class="activenav == 3 ? 'activenav':''" @click="navclick(3)">已过期（0）</view>
				</view>
			</view>
		</view>
		<view class="box margin30">
			<view class="coupon flex-start">
				<view class="blue">
					<view class="price"><text>￥</text>100</view>
					<view class="full">满400可使用</view>
				</view>
				<view class="white">
					<view class="all">全场通用券</view>
					<view class="time">有效期至2023-04-07</view>
					<view class="use flex">立即使用<uni-icons custom-prefix="custom-icon" color="#006dc5" type="right" size="16"></uni-icons> </view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activenav: 0,
			}
		},
		onLoad() {
			this.$refs.pageHead.getTopHeight()
		},
		methods: {
			navclick(type) { //切换状态
				let that = this;
				that.activenav = type;
				// that.initData();
			},
		}
	}
</script>

<style>
	page{
		background-color: #efefef;
		padding-bottom: 30rpx;
	}
	.content{
		border-radius: 12rpx;
		margin-top: 50rpx;
		padding: 26rpx;
		background-color: #fff;
	}
	.ordernavmain {
		display: flex;
		justify-content: space-between;
		width: 100%;
		
	}
	
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 33%;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #0078d3;
	}
	.activenav::after {
		position: absolute;
		left: 11%;
		top: 62rpx;
		content: "";
		display: block;
		width: 72%;
		height: 4rpx;
		background-color: #1679c8;
		border-radius: 2rpx;
	}
	.box{
		padding: 1rpx 26rpx 26rpx 26rpx;
		margin-top: 22rpx;
		border-radius: 14rpx;
		height: 1100rpx;
	}
	.coupon{
		margin-top: 26rpx;
	}
	.blue{
		background-image: linear-gradient(#008ae5, #006dc5);
		width: 27%;
		height: 180rpx;
		color: #ffffff;text-align: center;
	}
	.price text{
		font-size: 30rpx;
	}
	.price{
		margin-top:34rpx;
		font-size: 48rpx;
	}
	.full{
		margin-top:10rpx;
		font-size: 20rpx;
	}
	.white{
		width: 73%;
		height: 180rpx;
		border: 1rpx solid #f7f5f1;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	.all{
		font-size: 32rpx;
	}
	.time{
		font-size: 22rpx;
		margin-top: 14rpx;
		color: #9e9e9e;
	}
	.use{
		font-size: 24rpx;
		margin-top: 28rpx;
		color: #006dc5;
	}
</style>

